<template>
	<view class="page">
		 <!-- <u-tabs :list="list1" @change="click"></u-tabs> -->
		 <view class="select around">
		 	<view v-for="(item,index) in list1" :class="['select-item',Inv==index?'select-act':'']" @click="click(item,index)">{{item.name}}</view>
		 	
		 	
		 </view>
		 <view class="cont-item" v-show="Inv==4">
		 	<view class="align tianhua center">
		 		<img style="width: 50rpx;height: 50rpx;margin-right: 30rpx;" src="/static/jia.png" alt="" srcset="">
				添加话题
		 	</view>
			<view class="">
				<u--textarea v-model="value5" placeholder="分享你的想法..." count maxlength='2000' border="bottom"></u--textarea>
				
			
			
			</view>
			<view class="" style="margin-top: 20rpx;">
				<u-upload
						:fileList="fileList1"
						@afterRead="afterRead"
						@delete="deletePic"
						name="1"
						multiple
						:maxCount="10"
					></u-upload>
			</view>
			<view class="fabubot center align">
				发布
			</view>
		 </view>
		 <view class="cont-item" v-show="Inv==2">
		 	<view class="list between">
		 		<view class="list_left align">
		 			<u-avatar size='60' src="/static/touxiang1.jpg"></u-avatar>
					<view class="list_left_font">
						<view class="list_left_font1">
							光锥智能
						</view>
						<view class="list_left_font2">
							来这里，看千行百业的数字化、智能化。
						</view>
					</view>
		 		</view>
				<view class="list_right">
					<view class="list_right_yuan">
						
					</view>
				</view>
		 	</view>
			<view class="list between">
				<view class="list_left align">
					<u-avatar size='60' src="/static/touxiang2.jpg"></u-avatar>
					<view class="list_left_font">
						<view class="list_left_font1">
							互联网怪盗团
						</view>
						<view class="list_left_font2">
							互联网行业观察者、研究者
						</view>
					</view>
				</view>
				<view class="list_right">
					<view class="list_right_yuan">
						
					</view>
				</view>
			</view>
			<view class="list between">
				<view class="list_left align">
					<u-avatar size='60' src="/static/touxiang3.jpg"></u-avatar>
					<view class="list_left_font">
						<view class="list_left_font1">
							8055保卫科
						</view>
						<view class="list_left_font2">
							职场科普连环画，求职打工多看它
						</view>
					</view>
				</view>
				<view class="list_right">
					<view class="list_right_yuan">
						
					</view>
				</view>
			</view>
			<view class="list between">
				<view class="list_left align">
					<u-avatar size='60' src="/static/touxiang4.jpg"></u-avatar>
					<view class="list_left_font">
						<view class="list_left_font1">
							财税审券投
						</view>
						<view class="list_left_font2">
							读书阅人，游历实践，青梅煮酒，共同成长。
						</view>
					</view>
				</view>
				<view class="list_right">
					<view class="list_right_yuan">
						
					</view>
				</view>
			</view>
			<view class="list between">
				<view class="list_left align">
					<u-avatar size='60' src="/static/touxiang5.jpg"></u-avatar>
					<view class="list_left_font">
						<view class="list_left_font1">
							邢小七
						</view>
						<view class="list_left_font2">
							金融央企I人大金融硕士|职场博主|擅长求职
						</view>
					</view>
				</view>
				<view class="list_right">
					<view class="list_right_yuan">
						
					</view>
				</view>
			</view>
			<view class="list between">
				<view class="list_left align">
					<u-avatar size='60' src="/static/touxiang6.jpg"></u-avatar>
					<view class="list_left_font">
						<view class="list_left_font1">
							安洪贺
						</view>
						<view class="list_left_font2">
							市场策划·13年
						</view>
					</view>
				</view>
				<view class="list_right">
					<view class="list_right_yuan">
						
					</view>
				</view>
			</view>
		 </view>
		 <view class="cont-item" v-show="Inv==0">
		 	<view class="card ">
		 		<view class="card_top between">
		 			<view class="align">
		 				<img class="card_top_img" src="/static/icon/chuizi.png" alt="" srcset="">
						<view class="card_top_font">
							众裁厅
						</view>
		 			</view>
					<view class="align">
						<view class="card_top_rightfont">
							查看更多
						</view>
						<img class="card_top_rightimg" src="/static/icon/rightlogo.png" alt="" srcset="">
					</view>
		 		</view>
				<view class="font_top">
					招聘者好奇“为什么应聘的人都不看岗位详情”求职者同好奇“(回答) 这不就是你的工作吗"
				</view>
				<view class="display font_bot">
					你在招聘或求职时好奇过这样的问题吗? 
					<view class="font_lan">
						详情...
					</view>
				</view>
				<view class="xuanzhe">
					<u-radio-group
						v-model="radiovalue7"
						:borderBottom="true"
						placement="column"
						iconPlacement="right"
					>
						<u-radio
							:customStyle="{marginBottom: '16px'}"
							v-for="(item, index) in radiolist7"
							:key="index"
							:label="item.name"
							:name="item.name"
						>
						</u-radio>
					</u-radio-group>
				</view>
				<view class="font_small">
					3096参与众裁·601发表观点
				</view>
				
		 	</view>
			<view class="card martop">
				<view class="wencard_top display">
					<view class="">
						<u-avatar src="/static/touxiang.jpg"></u-avatar>
					</view>
					<view class="wencard_top_right">
						<view class="wencard_top_right_top">
							虎
						</view>
						<view class="wencard_top_right_bot">
							运营专员·4年
						</view>
					</view>
				</view>
				<view class="huida">
					回答了问题
				</view>
				<view class="wen">
					干就完了，
				</view>
				<view class="wen">
					吃啥都行别吃亏。
				</view>
				<view class="display wen">
					应届生的身份是有用的，就业和考职称 (公...
					<view class="font_lan">
						全文
					</view>
				</view>
				<view class="jianyi align">
					<img src="/static/wenti.png" alt="" srcset="">
					<view class="jianyi_font">
						对应届生有哪些建议？
					</view>
				</view>
				<view class="dibu around">
					<view class="display align">
						<img src="/static/xiao.png" alt="" srcset="">
						70
					</view>
					<view class="display align">
						<img src="/static/shou.png" alt="" srcset="">
						310
					</view>
					<view class="display align">
						<img src="/static/zan.png" alt="" srcset="">
						477
					</view>
				</view>
				<view class="between jia">
					<view class="">
						
					</view>
					<img src="/static/jia.png" alt="" srcset="">
				</view>
			</view>
			<view class="card martop">
				<view class="wencard_top display">
					<view class="">
						<u-avatar src="/static/touxiang.jpg"></u-avatar>
					</view>
					<view class="wencard_top_right">
						<view class="wencard_top_right_top">
							兔
						</view>
						<view class="wencard_top_right_bot">
							运营专员·6年
						</view>
					</view>
				</view>
				<view class="huida">
					回答了问题
				</view>
				<view class="wen">
					加油加油，
				</view>
				<view class="wen">
					奋斗没有一成不变得。
				</view>
				<view class="display wen">
					应届生的身份是有用的，就业和考职称 (公...
					<view class="font_lan">
						全文
					</view>
				</view>
				<view class="jianyi align">
					<img src="/static/wenti.png" alt="" srcset="">
					<view class="jianyi_font">
						对应届生有哪些建议？
					</view>
				</view>
				<view class="dibu around">
					<view class="display align">
						<img src="/static/xiao.png" alt="" srcset="">
						55
					</view>
					<view class="display align">
						<img src="/static/shou.png" alt="" srcset="">
						69
					</view>
					<view class="display align">
						<img src="/static/zan.png" alt="" srcset="">
						236
					</view>
				</view>
				<view class="between jia">
					<view class="">
						
					</view>
					<img src="/static/jia.png" alt="" srcset="">
				</view>
			</view>
		 </view>
		 <view class="cont-item" v-show="Inv==3">
		 	<view class="card ">
		 		<view class="card_top between">
		 			<view class="align">
		 				<img class="card_top_img" src="/static/icon/chuizi.png" alt="" srcset="">
		 						<view class="card_top_font">
		 							众裁厅
		 						</view>
		 			</view>
		 					<view class="align">
		 						<view class="card_top_rightfont">
		 							查看更多
		 						</view>
		 						<img class="card_top_rightimg" src="/static/icon/rightlogo.png" alt="" srcset="">
		 					</view>
		 		</view>
		 				<view class="font_top">
		 					招聘者好奇“为什么应聘的人都不看岗位详情”求职者同好奇“(回答) 这不就是你的工作吗"
		 				</view>
		 				<view class="display font_bot">
		 					你在招聘或求职时好奇过这样的问题吗? 
		 					<view class="font_lan">
		 						详情...
		 					</view>
		 				</view>
		 				<view class="xuanzhe">
		 					<u-radio-group
		 						v-model="radiovalue7"
		 						:borderBottom="true"
		 						placement="column"
		 						iconPlacement="right"
		 					>
		 						<u-radio
		 							:customStyle="{marginBottom: '16px'}"
		 							v-for="(item, index) in radiolist7"
		 							:key="index"
		 							:label="item.name"
		 							:name="item.name"
		 						>
		 						</u-radio>
		 					</u-radio-group>
		 				</view>
		 				<view class="font_small">
		 					3096参与众裁·601发表观点
		 				</view>
		 				
		 	</view>
		 			<view class="card martop">
		 				<view class="wencard_top display">
		 					<view class="">
		 						<u-avatar src="/static/touxiang.jpg"></u-avatar>
		 					</view>
		 					<view class="wencard_top_right">
		 						<view class="wencard_top_right_top">
		 							虎
		 						</view>
		 						<view class="wencard_top_right_bot">
		 							运营专员·4年
		 						</view>
		 					</view>
		 				</view>
		 				<view class="huida">
		 					回答了问题
		 				</view>
		 				<view class="wen">
		 					干就完了，
		 				</view>
		 				<view class="wen">
		 					吃啥都行别吃亏。
		 				</view>
		 				<view class="display wen">
		 					应届生的身份是有用的，就业和考职称 (公...
		 					<view class="font_lan">
		 						全文
		 					</view>
		 				</view>
		 				<view class="jianyi align">
		 					<img src="/static/wenti.png" alt="" srcset="">
		 					<view class="jianyi_font">
		 						对应届生有哪些建议？
		 					</view>
		 				</view>
		 				<view class="dibu around">
		 					<view class="display align">
		 						<img src="/static/xiao.png" alt="" srcset="">
		 						70
		 					</view>
		 					<view class="display align">
		 						<img src="/static/shou.png" alt="" srcset="">
		 						310
		 					</view>
		 					<view class="display align">
		 						<img src="/static/zan.png" alt="" srcset="">
		 						477
		 					</view>
		 				</view>
		 				<view class="between jia">
		 					<view class="">
		 						
		 					</view>
		 					<img src="/static/jia.png" alt="" srcset="">
		 				</view>
		 			</view>
					<view class="card martop">
						<view class="wencard_top display">
							<view class="">
								<u-avatar src="/static/touxiang.jpg"></u-avatar>
							</view>
							<view class="wencard_top_right">
								<view class="wencard_top_right_top">
									兔
								</view>
								<view class="wencard_top_right_bot">
									运营专员·6年
								</view>
							</view>
						</view>
						<view class="huida">
							回答了问题
						</view>
						<view class="wen">
							加油加油，
						</view>
						<view class="wen">
							奋斗没有一成不变得。
						</view>
						<view class="display wen">
							应届生的身份是有用的，就业和考职称 (公...
							<view class="font_lan">
								全文
							</view>
						</view>
						<view class="jianyi align">
							<img src="/static/wenti.png" alt="" srcset="">
							<view class="jianyi_font">
								对应届生有哪些建议？
							</view>
						</view>
						<view class="dibu around">
							<view class="display align">
								<img src="/static/xiao.png" alt="" srcset="">
								55
							</view>
							<view class="display align">
								<img src="/static/shou.png" alt="" srcset="">
								69
							</view>
							<view class="display align">
								<img src="/static/zan.png" alt="" srcset="">
								236
							</view>
						</view>
						<view class="between jia">
							<view class="">
								
							</view>
							<img src="/static/jia.png" alt="" srcset="">
						</view>
					</view>
		 </view>
		 <view class="cont-item" v-show="Inv==1">
		 	<view class="list between">
		 		<view class="list_left align">
		 			<img style='width: 160rpx;height: 110rpx;' src="/static/xw1.png"></img>
		 					<view class="list_left_font">
		 						<view class="list_left_font1hei">
		 							ChatGPT是云计算的iPhone时刻
		 						</view>
		 						<view class="list_left_font2 between">
		 							<view class="">
		 								光锥智能
		 							</view>
									<view class="align">
										<view class="">
											726阅读
										</view>
										<view class="">
											<img style='width: 40rpx;height: 40rpx;' src="/static/icon/shenglue.png" alt="" srcset="">
										</view>
									</view>
		 						</view>
		 					</view>
		 		</view>
		 				
		 	</view>
		 	<view class="list between">
		 		<view class="list_left align">
		 			<img style='width: 160rpx;height: 110rpx;' src="/static/xw2.png"></img>
		 					<view class="list_left_font">
		 						<view class="list_left_font1hei">
		 							旅游过年的我:行走的盖羊，被关起来宰
		 						</view>
		 						<view class="list_left_font2 between">
		 							<view class="">
		 								表外表里
		 							</view>
		 							<view class="align">
		 								<view class="">
		 									430阅读
		 								</view>
		 								<view class="">
		 									<img style='width: 40rpx;height: 40rpx;' src="/static/icon/shenglue.png" alt="" srcset="">
		 								</view>
		 							</view>
		 						</view>
		 					</view>
		 		</view>
		 				
		 	</view>
			<view class="list between">
				<view class="list_left align">
					<img style='width: 160rpx;height: 110rpx;' src="/static/xw3.png"></img>
							<view class="list_left_font">
								<view class="list_left_font1hei">
									“涨价”的比亚迪，还能“销冠多久?
								</view>
								<view class="list_left_font2 between">
									<view class="">
										表外表里
									</view>
									<view class="align">
										<view class="">
											412阅读
										</view>
										<view class="">
											<img style='width: 40rpx;height: 40rpx;' src="/static/icon/shenglue.png" alt="" srcset="">
										</view>
									</view>
								</view>
							</view>
				</view>
						
			</view>
			
			<view class="list between">
				<view class="list_left align">
					<img style='width: 160rpx;height: 110rpx;' src="/static/xw4.png"></img>
							<view class="list_left_font">
								<view class="list_left_font1hei">
									00后“搞钱”风云:日赚5000，真不算多
								</view>
								<view class="list_left_font2 between">
									<view class="">
										表外表里
									</view>
									<view class="align">
										<view class="">
											1211阅读
										</view>
										<view class="">
											<img style='width: 40rpx;height: 40rpx;' src="/static/icon/shenglue.png" alt="" srcset="">
										</view>
									</view>
								</view>
							</view>
				</view>
						
			</view>
			<view class="list between">
				<view class="list_left align">
					<img style='width: 160rpx;height: 110rpx;' src="/static/xw5.png"></img>
							<view class="list_left_font">
								<view class="list_left_font1hei">
									关于贝壳的成长性，市场可能错了
								</view>
								<view class="list_left_font2 between">
									<view class="">
										表外表里
									</view>
									<view class="align">
										<view class="">
											298阅读
										</view>
										<view class="">
											<img style='width: 40rpx;height: 40rpx;' src="/static/icon/shenglue.png" alt="" srcset="">
										</view>
									</view>
								</view>
							</view>
				</view>
						
			</view>
			
			
			
		 			
		 			
		 			
		 			
		 </view>
		 
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fileList1: [],
				value5:'',
				radiovalue7: '可爱',
				value:'',
				Inv: 0, 
				index:0,
				radiolist7: [{
						name: '求职者欠妥，招聘者是正常反应',
						disabled: false
					},
					{
						name: '招聘者欠妥，求职者是正常反应',
						disabled: false
					},
					{
						name: '双方均欠妥，我会避免类似言行',
						disabled: false
					},
					{
						name: '双方均无不妥，属于正常沟通',
						disabled: false
					},
				],
				list1: [{
						name: '推荐',
					}, {
						name: '好文',
					}, {
						name: '我的关注'
					}, {
						name: '我的收藏'
					}, {
						name: '发帖'
					}]
			}
		},
		onLoad() {
	
		},
		methods: {
			// 删除图片
						deletePic(event) {
							this[`fileList${event.name}`].splice(event.index, 1)
						},
						// 新增图片
						async afterRead(event) {
							// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
							let lists = [].concat(event.file)
							let fileListLen = this[`fileList${event.name}`].length
							lists.map((item) => {
								this[`fileList${event.name}`].push({
									...item,
									status: 'uploading',
									message: '上传中'
								})
							})
							for (let i = 0; i < lists.length; i++) {
								const result = await this.uploadFilePromise(lists[i].url)
								let item = this[`fileList${event.name}`][fileListLen]
								this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
									status: 'success',
									message: '',
									url: result
								}))
								fileListLen++
							}
						},
						uploadFilePromise(url) {
							return new Promise((resolve, reject) => {
								let a = uni.uploadFile({
									url: 'http://192.168.2.21:7001/upload', // 仅为示例，非真实的接口地址
									filePath: url,
									name: 'file',
									formData: {
										user: 'test'
									},
									success: (res) => {
										setTimeout(() => {
											resolve(res.data.data)
										}, 1000)
									}
								});
							})
						},
			click(a,index){
				this.Inv=index
				console.log(index)
			},
		}
	}
</script>

<style scoped>
	.page{
		background-color: rgb(245,245,245);
	}
	/deep/.u-textarea{
		background-color: rgb(245,245,245);
	}
	/deep/.u-textarea__count{
		background-color: rgb(245,245,245) !important;
	}
	.fabubot{
		color: #fff;
		background-color: #489BA0;
		width: 160rpx;
		height: 80rpx;
		border-radius: 10rpx;
		margin: 0 auto;
	}
	.tianhua{
		width: 100%;
		height: 120rpx;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.list{
		margin-bottom: 20rpx;
	}
	.list_left_font{
		margin-left: 10rpx;
	}
	.list_right_yuan{
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		border: 2rpx solid #000;
	}
	.list_left_font1hei{
		font-weight: bold;
		height: 80rpx;
	}
	.list_left_font1{
		font-weight: bold;
	}
	.list_left_font2{
		margin-top: 6rpx;
		font-size: 13px;
		color: rgb(132, 132, 132);
	}
	.list{
		background-color: #fff;
		border-radius: 30rpx;
		padding: 30rpx;
	}
	/* /deep/.u-tabs__wrapper__nav__item__text{
		width: 120rpx !important;
	} */
	.martop{
		margin-top: 10rpx;
	}
	.wen{
		margin-bottom: 6rpx;
	}
	.wencard_top_right{
		margin-left: 6rpx;
	}
	.wencard_top_right_top{
		color: #000;
	}
	.jianyi img{
		width: 60rpx;
		height: 60rpx;
		
	}
	.jianyi{
		margin-left: 10rpx;
		color: rgb(132, 132, 132);
	}
	.jianyi_font{
		margin-left: 10rpx;
	}
	.jia img{
		width: 100rpx;
		height: 100rpx;
		
	}
	.dibu{
		margin-top: 20rpx;
		color: #707070;
	}
	.dibu img{
		width: 30rpx;
		height: 30rpx;
	}
	.huida{
		margin-top: 12rpx;
		margin-bottom: 12rpx;
		font-size: 13px;
		color: rgb(132, 132, 132);
	}
	.wencard_top_right_bot{
		margin-top: 3rpx;
		font-size: 12px;
		color: rgb(132, 132, 132);
	}
	.xuanzhe{
		width: 100%;
		margin-top: 15rpx;
	}
	.font_small{
		font-size: 14px;
		color: rgb(132, 132, 132);
		/* margin-top: 5rpx; */
	}
	.font_lan{
		color: #489BA0;
	}
	.font_top{
		font-size: 17px;
		margin-top: 20rpx;
	}
	.font_bot{
		color: rgb(132, 132, 132);
		margin-top: 10rpx;
	}
	.card_top_font{
		margin-left: 20rpx;
		color: #489BA0;
		font-weight: bold;
	}
	.card_top_rightfont{
		color: #bfbfbf;
	}
	.card_top_img{
		width: 40rpx;
		height: 40rpx;
	}
	.card_top_rightimg{
		width: 30rpx;
		height: 30rpx;
	}
	.card{
		padding: 20rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		background-color: #fff;
	}
	.select{
		
		// width: 100%;
		height: 90rpx;
		display: flex;
		
		overflow-x: auto;
		width: 100%;
		background-color: #fff;
		
	}
	.cont-item{
		padding: 20rpx;
		box-sizing: border-box;
	}
	.select-item {
		 // display: inline-block;
			font-size: 32upx;
			padding-left: 10rpx;
			padding-right: 10rpx;
			// float: left;
			// width: 230rpx !important;
			text-align: center;
			color: #3D3D3D;
			height: 70upx;
			line-height: 70upx;
			// display: flex;
			// justify-content: center;
			// align-items: center;
			flex-shrink: 0;
		}
	.select-act {
			position:relative;
			z-index: 1;
			font-size:32rpx;
			color: #489BA0;
		}
	.select-act:before {
			content: '';
			width: 50%;
			height: 6rpx;
			background:#489BA0;
			position: absolute;
			bottom: 6rpx;
			left: 50%;
			z-index: -1;	
			transform: translateX(-50%);
		}
</style>